<template>
  <div class="api-doc">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>API 接口文档</span>
        </div>
      </template>

      <div class="doc-section">
        <h3>接口说明</h3>
        <p>本服务提供 RESTful API 接口，用于将网页转换为图片。</p>
      </div>

      <div class="doc-section">
        <h3>创建截图任务</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="请求地址">POST /api/v1/screenshot</el-descriptions-item>
          <el-descriptions-item label="Content-Type">application/json</el-descriptions-item>
          <el-descriptions-item label="请求参数">
            <pre><code>{
  "url": "https://www.example.com",  // 必填，网页URL
  "width": 1920,                     // 可选，默认1920
  "height": 1080,                    // 可选，默认1080
  "format": "jpg",                   // 可选，jpg或png，默认jpg
  "quality": 90,                     // 可选，1-100，默认90
  "captureMode": "full"             // 可选，full或visible，默认full
}</code></pre>
          </el-descriptions-item>
          <el-descriptions-item label="响应示例">
            <pre><code>{
  "code": 0,
  "message": "success",
  "data": {
    "taskId": "7b8f9e2a..."
  }
}</code></pre>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="doc-section">
        <h3>获取任务状态</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="请求地址">GET /api/v1/screenshot/{taskId}/status</el-descriptions-item>
          <el-descriptions-item label="响应示例">
            <pre><code>{
  "code": 0,
  "message": "success",
  "data": {
    "taskId": "7b8f9e2a...",
    "status": 2,           // 0:等待中 1:处理中 2:成功 3:失败
    "errorMsg": null
  }
}</code></pre>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="doc-section">
        <h3>获取截图结果</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="请求地址">GET /api/v1/screenshot/{taskId}/result</el-descriptions-item>
          <el-descriptions-item label="响应说明">直接返回图片二进制数据</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="doc-section">
        <h3>示例代码</h3>
        <el-tabs>
          <el-tab-pane label="cURL">
            <pre><code>curl -X POST http://localhost:8080/api/v1/screenshot \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.example.com",
    "width": 1920,
    "height": 1080
  }'</code></pre>
          </el-tab-pane>
          <el-tab-pane label="Python">
            <pre><code>import requests
import time

# 创建任务
response = requests.post('http://localhost:8080/api/v1/screenshot', json={
    'url': 'https://www.example.com',
    'width': 1920,
    'height': 1080
})
task_id = response.json()['data']['taskId']

# 等待任务完成
while True:
    status = requests.get(f'http://localhost:8080/api/v1/screenshot/{task_id}/status')
    if status.json()['data']['status'] == 2:  # 成功
        break
    time.sleep(1)

# 下载图片
image = requests.get(f'http://localhost:8080/api/v1/screenshot/{task_id}/result')
with open('screenshot.jpg', 'wb') as f:
    f.write(image.content)</code></pre>
          </el-tab-pane>
          <el-tab-pane label="JavaScript">
            <pre><code>// 创建任务
const response = await fetch('http://localhost:8080/api/v1/screenshot', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://www.example.com',
    width: 1920,
    height: 1080
  })
})
const { taskId } = (await response.json()).data

// 等待任务完成
while (true) {
  const status = await fetch(`http://localhost:8080/api/v1/screenshot/${taskId}/status`)
  const data = (await status.json()).data
  if (data.status === 2) break  // 成功
  await new Promise(resolve => setTimeout(resolve, 1000))
}

// 下载图片
const image = await fetch(`http://localhost:8080/api/v1/screenshot/${taskId}/result`)
const blob = await image.blob()
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'screenshot.jpg'
link.click()
URL.revokeObjectURL(url)</code></pre>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.api-doc {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
}

.doc-section {
  margin-bottom: 30px;
}

.doc-section h3 {
  margin-bottom: 15px;
  color: #303133;
}

pre {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: Monaco, Consolas, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  width: 150px;
}
</style> 